<template>
    <el-form ref="loginForm"
             :rules="myrules"
             :model="loginForm"
             class="loginForm"
             v-loading="loading"
             element-loading-text="登录处理中......"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <h2>系统登录</h2>
        <el-form-item prop="username">
            <el-input type="text" v-model="loginForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-input type="text" v-model="loginForm.code" style="width: 220px" placeholder="请输入验证码"></el-input>
            <el-image :src="captchaImg" class="captchaImg" title="看不清，换一张" @click="getCaptcha"></el-image>
        </el-form-item>
        <el-form-item>
            <el-checkbox checked="checked">记住我</el-checkbox>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: 'Login',
        data(){
            return{
                loading: false,
                captchaImg: 'captcha?m='+new Date(),
                loading: false,
                loginForm:{
                    username: 'admin',
                    password: '123456',
                    code: 'abc'
                },
                myrules:{
                    username:[ {required:true,message:'账号不能为空',trigger:'blur'}],
                    password:[ {required:true,message:'密码不能为空',trigger:'blur'}],
                    code:[ {required:true,message:'验证码不能为空',trigger:'blur'}]
                }
            }
        },
        methods: {

            getCaptcha(){
                this.captchaImg= 'captcha?m='+new Date();
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                     if(valid){
                         //启动加载组件
                         this.loading=true;
                         this.postRequest('admin/login', this.loginForm).then(resp=>{
                              if(resp){
                                  this.loading=false;
                                  //获取请求头；
                                  let tokenHead= resp.data.tokenHead;
                                  let token= resp.data.token;
                                  let tokenStr= tokenHead+ token;
                                  console.log(tokenHead);
                                  console.log(token);
                                  //保存
                                  window.sessionStorage.setItem("token",tokenStr);
                                  //跳转到首页
                                  this.$router.push("/home");
                              }
                         })
                     }else{
                         this.$message.error("请输入完整信息！");
                     }
                })
            }
        },
        created(){
            this.getCaptcha();
        }
    }
</script>

<style scoped>
    .loginForm{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 100px auto;
        width: 350px;
        padding: 35px 15px 35px 15px;
        border: 1px solid #eaeaea;
        background: #ffffff;
        box-shadow: 0 0 25px #caeaea;
    }
    .captchaImg {
        float: right;
        margin-left: 8px;
        border-radius: 4px;
    }
</style>
